<template>
	<view>
		<view v-if="userinfo.personType=='manager'">
			<view class="tui-title">
				工作台
			</view>
			<view class="center-container">
				<tui-grid unlined>
					<block v-for="(item, index) in managerGridList" :key="index">
						<tui-grid-item :border="false" :bottom-line="false" :cell="3" @click="routeTo(item.url)">
							<view class="tui-grid-icon" :style="{backgroundColor:item.bgColor}">
								<tui-icon :name="item.icon" :size="25" color="#ffffff"></tui-icon>
							</view>
							<text class="tui-grid-label">{{ item.name }}</text>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
		</view>
		<view v-if="userinfo.personType=='cleaning_and_sanitation'">
			<view class="tui-title">
				清洁员工作台
			</view>
			<view class="center-container">
				<tui-grid unlined>
					<block v-for="(item, index) in cleanerGridList" :key="index">
						<tui-grid-item :border="false" :bottom-line="false" :cell="3" @click="routeTo(item.url)">
							<view class="tui-grid-icon" :style="{backgroundColor:item.bgColor}">
								<tui-icon :name="item.icon" :size="25" color="#ffffff"></tui-icon>
							</view>
							<text class="tui-grid-label">{{ item.name }}</text>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
		</view>
		<view v-if="userinfo.personType=='driver'">
			<view class="tui-title">
				司机工作台
			</view>
			<view class="center-container">
				<tui-grid unlined>
					<block v-for="(item, index) in driverGridList" :key="index">
						<tui-grid-item :border="false" :bottom-line="false" :cell="3" @click="routeTo(item.url)">
							<view class="tui-grid-icon" :style="{backgroundColor:item.bgColor}">
								<tui-icon :name="item.icon" :size="25" color="#ffffff"></tui-icon>
							</view>
							<text class="tui-grid-label">{{ item.name }}</text>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
		</view>
		<view v-if="!isLogin">
			<tui-no-data  imgUrl="/static/images/toast/img_nodata.png">
				本程序仅限宏侨集团内部人员使用，仅供垃圾清运车司机、环卫人员使用手机号码登录。
				
				<tui-button type="danger " width="200rpx" height="60rpx" size="26" margin="32rpx auto" @tap="go">去登陆</tui-button>
				<tui-button type="primary" width="200rpx" height="60rpx" size="26" margin="32rpx auto" @tap="experience">去体验</tui-button>
			</tui-no-data>

		</view>


	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";

	export default {
		data() {
			return {
				managerGridList: [{
					name: "清运工单",
					icon: "clean",
					bgColor: '#fc872d',
					url: '/pages/order/managerOrderList'
				}, ],
				driverGridList: [{
					name: "清运工单",
					icon: "clean",
					bgColor: '#fc872d',
					url: '/pages/order/driverOrderList'
				}, ],
				cleanerGridList: [{
						name: "清运工单",
						icon: "clean",
						bgColor: '#fc872d',
						url: '/pages/order/cleanerOrderList'
					},
					// {
					// 	name: "告警列表",
					// 	icon: "notice",
					// 	bgColor: '#fc872d',
					// 	url: '/pages/apply/alarmList'
					// },
					// {
					// 	name: "取消告警申请",
					// 	icon: "warning",
					// 	bgColor: '#fc872d',
					// 	url: '/pages/apply/alarmList'
					// },
					// {
					// 	name: "临时任务申请",
					// 	icon: "feedback",
					// 	bgColor: '#fc872d',
					// 	url: '/pages/apply/taskList'
					// }
				],
				scrollH: 256,
				modalShow: false,

			};
		},
		computed: {
			...mapState(["isLogin", "userinfo"]),


		},
		watch: {},
		async created() {},
		mounted() {

		},
		onLoad(options) {
			if (this.userinfo.userType == 'CHECK') {
				this.tui.request("/api/user/info", "GET", {

				}, false, false, true).then(res => {
					if (res.data.group) {
						uni.setStorageSync("group", res.data.group);
						this.setGroup(res.data.group)
						this.cleanerGridList = [{
								name: "执行日常三检",
								icon: "execute-inspection",
								bgColor: '#fc872d',
								url: '/pages/check/checkObjForm'
							},
							{
								name: "日常三检记录",
								icon: "inspection-record",
								bgColor: '#fc872d',
								url: '/pages/check/checkRecord'
							},
							{
								name: "日常三检设置",
								icon: "setup",
								bgColor: '#fc872d',
								url: '/pages/check/setCheck'


							}
						]
					}


				})
			}

		},
		onShow() {
			if (!this.isLogin) {
				// uni.navigateTo({
				// 	url: "/pages/login/login/login",
				// });
			} else {}
		},
		methods: {
			...mapMutations(["login"]),
			routeTo(url) {

				uni.navigateTo({
					url: url,
				});
			},
			go() {

				uni.navigateTo({
					url: "/pages/login/login/login",
				});
			},
			experience(){
				this.login({personType:'manager'})
			},
		},
	};
</script>

<style>
	.tui-title {
		padding: 10rpx 30rpx 10rpx 30rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.center-container {
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: 0rpx 30rpx 26rpx 30rpx;
		box-shadow: 0 15rpx 10rpx -15rpx #efefef;
		position: relative;
		z-index: 2;
	}

	.tui-grid-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10rpx;
	}

	.tui-grid-label-5 {
		margin-top: 0 !important;
		color: #8a5966 !important;
	}
</style>
